<template>
  <div>
    <div ref="editor" @input="result" style="text-align:left;width:100%"></div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  name: "Editor",
  data() {
    return {
      editor: null
    };
  },
  methods: {
    //  数据同步
    result() {
      this.$emit("input", this.editor.txt.html());
    },
    // 初始化
    init() {
      this.editor = new E(this.$refs.editor);

      this.editor.customConfig.onchange = html => {
        // this.editorContent = html
        // this.$emit('change', html) // 将内容同步到父组件中
      };
      this.editor.customConfig.zIndex = 1;
      this.editor.customConfig.uploadImgServer = "https://morgan.dingxians.cn/admin/common/upload?format=3";
      this.editor.customConfig.uploadFileName = "file";
      this.editor.customConfig.uploadImgHooks = {
        before: function(xhr, editor, files) {
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          //     prevent: true,
          //     msg: '放弃上传'
          // }
        },
        success: function(xhr, editor, res) {
          console.log(res,'成功')
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，res 是服务器端返回的结果
        },
        fail: function(xhr, editor, result) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function(xhr, editor) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function(xhr, editor) {
          // 图片上传超时时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function(insertImg, result, editor) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          var url = result.data.url;
          insertImg(url);
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      };
      this.editor.create();
    }
  },
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  mounted() {
    this.init();
    this.editor.txt.html(this.value);
  }
};
</script>

<style scoped></style>
